import { ref, onMounted, onUnmounted, Ref } from 'vue'
const useClickOutside = (elementRef:Ref<null|HTMLElement>) => {
  const isClickOutside = ref(false)
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => { document.addEventListener('click', handler) })
  onUnmounted(() => { document.removeEventListener('click', handler) })
  return { isClickOutside }
}
export default useClickOutside
